<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hamburgers by Jonathan Suh</title>
  <link rel="stylesheet" href="hamburgers.css">
  <style>
    code {
      display: inline-block;
    }

    code,
    .hamburger {
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div class="hamburger hamburger--arrow">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--arrow</code>

  <br>

  <div class="hamburger hamburger--arrow-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--arrow-r</code>

  <br>

  <div class="hamburger hamburger--arrowalt">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--arrowalt</code>

  <br>

  <div class="hamburger hamburger--arrowalt-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--arrowalt-r</code>

  <br>

  <div class="hamburger hamburger--boring">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--boring</code>

  <br>

  <div class="hamburger hamburger--collapse">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--collapse</code>

  <br>

  <div class="hamburger hamburger--collapse-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--collapse-r</code>

  <br>

  <div class="hamburger hamburger--elastic">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--elastic</code>

  <br>

  <div class="hamburger hamburger--elastic-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--elastic-r</code>

  <br>

  <div class="hamburger hamburger--emphatic">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--emphatic</code>

  <br>

  <div class="hamburger hamburger--emphatic-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--emphatic-r</code>

  <br>

  <div class="hamburger hamburger--slider">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--slider</code>

  <br>

  <div class="hamburger hamburger--slider-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--slider-r</code>

  <br>

  <div class="hamburger hamburger--spin">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--spin</code>

  <br>

  <div class="hamburger hamburger--spin-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--spin-r</code>

  <br>

  <div class="hamburger hamburger--squeeze">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--squeeze</code>

  <br>

  <div class="hamburger hamburger--vortex">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--vortex</code>

  <br>

  <div class="hamburger hamburger--vortex-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--vortex-r</code>

  <script>
  /**
   * forEach implementation for Objects/NodeLists/Arrays, automatic type loops and context options
   *
   * @private
   * @author Todd Motto
   * @link https://github.com/toddmotto/foreach
   * @param {Array|Object|NodeList} collection - Collection of items to iterate, could be an Array, Object or NodeList
   * @callback requestCallback      callback   - Callback function for each iteration.
   * @param {Array|Object|NodeList} scope=null - Object/NodeList/Array that forEach is iterating over, to use as the this value when executing callback.
   * @returns {}
   */
    var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};

    var hamburgers = document.querySelectorAll(".hamburger");
    if (hamburgers.length > 0) {
      forEach(hamburgers, function(hamburger) {
        hamburger.addEventListener("click", function() {
          this.classList.toggle("is-active");
        }, false);
      });
    }
  </script>
</body>
</html>
